<template>
  <div class="login-container">
    <div
      id="gradeTenChart"
      :style="{ width: '95%', height: '400px' }"
    />
  </div>
</template>

<script>
// import echarts from "echarts";
// import * as echarts from 'echarts';
export default {
  name: 'LoginIndex',
  components: {},
  props: {},
  data() {
    return {
      area: [
        '三门峡',
        '开封',
        '周口',
        '洛阳',
        '商丘',
        '鹤壁',
        '新乡',
        '安阳',
        '濮阳',
        '焦作',
        '济源',
        '郑州',
        '许昌',
        '平顶山',
        '漯河',
        '南阳',
        '驻马店',
        '信阳'
      ],
      cost: [2, 6, 1, 2, 3, 4, 6, 3, 1, 0, 0, 7, 5, 1, 3, 3, 2, 3]
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    // this.drawLine();
    setTimeout(() => {
      this.drawLine()
    }, 400)
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      const gradeTenChart = this.$echarts.init(
        document.getElementById('gradeTenChart')
      )
      // 绘制图表
      gradeTenChart.setOption({
        title: { text: '各地市超套餐数据统计', x: 'center' },
        tooltip: {
          trigger: 'axis',
          formatter: '{a} <br/>{b} : {c}(张)',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: this.area,
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: {
              interval: 0,
              rotate: 40
            }
          }
        ],
        yAxis: [
          {
            name: '                  单位：张',
            type: 'value'
          }
        ],
        series: [
          {
            name: '各地市超套餐数量',
            type: 'bar',
            barWidth: '60%',
            data: this.cost,
            itemStyle: {
              normal: {
                color: function(params) {
                  var colorlist = [
                    '#F2501F',
                    '#f37b1d',
                    '#fbbd08',
                    '#A7F22E',
                    '#39b54a',
                    '#1cbbb4',
                    '#0081ff',
                    '#6739b6',
                    '#9c26b0',
                    '#e03997',
                    '#AF298B',
                    '#a5673f',
                    '#D6E029',
                    '#89AF29',
                    '#AFAA29',
                    '#1FF2CB',
                    '#21D1F2',
                    '#24A7F2'
                  ]
                  return colorlist[params.dataIndex]
                }
              }
            }
          }
        ]
      })
    }
  }
}
</script>

<style scoped lang="scss"></style>
